<template>
  <div class="footer">
    <div class="w">
      <!-- mod是module模块的意思 -->
      <!-- mod_service -->
      <div class="mod_service">
        <ul>
          <li>
            <div class="mod_service_icon mod_service_duo"></div>
            <span>品类齐全，轻松购物</span>
          </li>
          <li>
            <div class="mod_service_icon mod_service_kuai"></div>
            <span>多仓直发，极速配送</span>
          </li>
          <li>
            <div class="mod_service_icon mod_service_hao"></div>
            <span>正品行货，精致服务</span>
          </li>
          <li>
            <div class="mod_service_icon mod_service_sheng"></div>
            <span>天天低价，畅选无忧</span>
          </li>
        </ul>
      </div>
      <!-- mod_copyright -->
      <div class="mod_copyright">
        <p class="mod_copyright_links">
          友情链接：
          <a href="https://www.jd.com/" target="_blank">京东书城</a>
          <i class="spacer"></i>
          <a href="https://www.taobao.com/" target="_blank">淘宝书城</a>
          <i class="spacer"></i>
          <a href="https://www.suning.com/" target="_blank">苏宁易购</a>
          <i class="spacer"></i>
          <a href="https://www.pinduoduo.com/" target="_blank">拼多多书城</a>
        </p>
        <p class="mod_copyright_info">
          地址：广东省广州市天河区五山路411号<br />
          邮编：510000
          电话：666-666-6666
          传真：666-66666666
          邮箱：666666666666@666.com<br />
          粤ICP备6666666666号粤公网安备6666666666
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {},
};
</script>

<style scoped>
.footer {
  height: 180px;
  margin-top: 20px;
  background-color: #f5f5f5;
}
.mod_service {
  height: 80px;
  line-height: 80px;
  text-align: center;
  border-bottom: 1px solid #ccc;
}
.mod_service li {
  position: relative;
  float: left;
  width: 20%;
  margin-left: 30px;
  padding-left: 30px;
}
.mod_service_icon {
  position: absolute;
  top: 18px;
  left: 14px;
  float: left;
  width: 36px;
  height: 43px;
  background: url("../assets/img/footer.png") no-repeat;
}
.mod_service_duo {
  background-position: 0 0px;
}
.mod_service_kuai {
  background-position: -41px 0px;
}
.mod_service_hao {
  background-position: -82px 0px;
}
.mod_service_sheng {
  background-position: -123px 0px;
}
.mod_service span {
  color: red;
  font-size: 18px;
  font-weight: bold;
}
.mod_copyright {
  text-align: center;
}
.mod_copyright_links {
  margin: 0 auto;
}
.mod_copyright_links i {
  display: inline-block;
}
</style>